<template>
  <div class="report-dialog-toolbar">
    <div class="report-dialog-search">
      <el-input
        v-model="searchInput"
        placeholder="请输入名称"
        style="width: 220px"
        @keyup.enter="handleQuery"
        clearable
      />
      <el-button type="primary" @click="handleQuery" class="ml-8">搜索</el-button>
    </div>
    <el-button type="primary" @click="openAddDialog">新增</el-button>
  </div>
  <el-table
    :data="tableData"
    style="width: 100%; margin: 16px 0"
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }"
  >
    <el-table-column prop="id" label="ID" width="80" align="center" />
    <el-table-column prop="reportName" label="名称" align="center" />
    <el-table-column prop="reportType" label="报表类型" align="center">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MQTT_DEVICE_REPORT_TYPE" :value="scope.row.reportType" />
      </template>
    </el-table-column>
    <el-table-column prop="mqttNum" label="采集个数" align="center" />
    <el-table-column label="操作" width="120" align="center">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 编辑报表对话框 -->
  <el-dialog v-model="editDialogVisible" title="编辑报表" width="400px" @close="closeEditDialog">
    <el-form :model="editForm">
      <el-form-item label="报表名称">
        <el-input v-model="editForm.reportName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeEditDialog">取消</el-button>
      <el-button type="primary" @click="confirmEdit">确定</el-button>
    </template>
  </el-dialog>
  <!-- 新增报表对话框 -->
  <el-dialog v-model="addDialogVisible" title="新增报表" width="400px" @close="closeAddDialog">
    <el-form :model="addForm">
      <el-form-item label="报表名称">
        <el-input v-model="addForm.reportName" />
      </el-form-item>
      <el-form-item label="报表类型">
        <el-input v-model="addForm.reportType" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeAddDialog">取消</el-button>
      <el-button type="primary" @click="confirmAdd">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DeviceReportApi } from '@/api/mqtt/devicereport'
import { DICT_TYPE } from '@/utils/dict'
const props = defineProps({
  device: Object
})
const emit = defineEmits(['update:visible'])
const searchInput = ref('')
const tableData = ref<any[]>([])
const loading = ref(false)
const message = useMessage && useMessage() // 兼容全局useMessage
const { t } = useI18n && useI18n() // 兼容全局i18n

onMounted(() => {
  getList()
})
const getList = async () => {
  console.log('props.device?.id', props.device?.id)
  loading.value = true
  try {
    await DeviceReportApi.getDeviceReportPage({
      deviceId: props.device?.id,
      pageNo: 1,
      pageSize: 100
    }).then((res) => {
      console.log('------->>>>>>>>>>', res)
      tableData.value = res.list || []
    })
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  getList()
}

const handleEdit = (row: any) => {
  openEditDialog(row)
}
// 新增编辑对话框相关变量和方法
const editDialogVisible = ref(false)
const editForm = ref<any>({})
const openEditDialog = (row: any) => {
  editForm.value = { ...row }
  editDialogVisible.value = true
}
const closeEditDialog = () => {
  editDialogVisible.value = false
}
const confirmEdit = async () => {
  if (!editForm.value.reportName) return
  loading.value = true
  try {
    await DeviceReportApi.updateDeviceReport(editForm.value)
    message && message.success(t ? t('common.updateSuccess') : '编辑成功')
    getList()
    closeEditDialog()
  } finally {
    loading.value = false
  }
}
const handleDelete = async (row: any) => {
  if (!(message ? await message.delConfirm() : confirm('确定删除该报表吗？'))) return
  loading.value = true
  try {
    await DeviceReportApi.deleteDeviceReport(row.id)
    message && message.success(t ? t('common.delSuccess') : '删除成功')
    getList()
  } finally {
    loading.value = false
  }
}

// 新增报表相关变量和方法
const addDialogVisible = ref(false)
const addForm = ref<any>({ reportName: '', reportType: '' })
const openAddDialog = () => {
  addForm.value = { reportName: '', reportType: '' }
  addDialogVisible.value = true
}
const closeAddDialog = () => {
  addDialogVisible.value = false
}
const confirmAdd = async () => {
  if (!addForm.value.reportName || !addForm.value.reportType) return
  loading.value = true
  try {
    await DeviceReportApi.createDeviceReport({
      ...addForm.value,
      deviceId: props.device?.id,
      mqttNum: '0'
    })
    message && message.success(t ? t('common.createSuccess') : '新增成功')
    getList()
    closeAddDialog()
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.report-dialog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.report-dialog-search {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ml-8 {
  margin-left: 8px;
}
</style>
